<template>
  <div class="Registerback">
    <div class="Registerbackimg"></div>
    <div class="Registerlocat">
      <div class="registerbox">
        <h1 class="title">智慧党建云平台</h1>
        <h1 class="title1">注册</h1>
        <div class="inputbox">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            class="demo-ruleForm"
          >
            <el-form-item prop="Account">
              <el-input
                v-model="ruleForm.Account"
                type="text"
                placeholder="请输入用户名"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="username">
              <el-input
                v-model="ruleForm.username"
                type="text"
                placeholder="请输入账号"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="email">
              <el-input
                v-model="ruleForm.email"
                type="text"
                placeholder="请输入邮箱"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="pwd1">
              <el-input
                v-model="ruleForm.pwd1"
                placeholder="请输入密码"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="pwd2">
              <el-input
                v-model="ruleForm.pwd2"
                placeholder="请再次输入密码"
                autocomplete="off"
              />
            </el-form-item>
            <div class="btnbox">
              <el-button type="primary" @click="login()">登录</el-button>
              <el-button type="primary" @click="register()">注册</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { registerApi } from "@/request/user";
const state = reactive({
  ruleForm: {
    username: "admin",
    Account: "admin",
    email: "weq@qq.com",
    pwd1: "123456",
    pwd2: "123456",
  },
});
let { ruleForm } = toRefs(state);
// 获取el-form组件对象
let ruleFormRef = ref();
// 获取项目路由对象
let router = useRouter();
// 获取项目vuex对象
// let store = useStore();

const validatePwd = (
  rule: unknown,
  value: string | undefined,
  cb: (msg?: string) => void
) => {
  if (!value) {
    cb("密码不能为空");
  } else {
    cb();
  }
};
const validatePwd1 = (
  rule: unknown,
  value: string | undefined,
  cb: (msg?: string) => void
) => {
  if (value === "") {
    cb("请再次输入密码");
  } else if (value != state.ruleForm.pwd1) {
    cb("两次输入密码不一致!");
  } else {
    cb();
  }
};
// 验证邮箱的规则
var checkEmail = (
  rules: unknown,
  value: String,
  cb: (msg?: string) => void
) => {
  // 验证邮箱的正则表达式
  const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
  if (regEmail.test(value)) {
    return cb();
  }
  cb(new Error("请输入合法的邮箱"));
};
// 校验规则
const rules = reactive({
  Account: [{ required: true, message: "用户名不能为空！", trigger: "blur" }],
  username: [{ required: true, message: "账号不能为空！", trigger: "blur" }],
  email: [
    { required: true, message: "邮箱不能为空！", trigger: "blur" },
    { validator: checkEmail, trigger: "blur" },
  ],
  pwd1: [
    { required: true, message: "密码不能为空！", trigger: "blur" },
    { validator: validatePwd, trigger: "blur" },
  ],
  pwd2: [
    { required: true, message: "请再次输入密码！", trigger: "blur" },
    { validator: validatePwd1, trigger: "blur" },
  ],
});
// 点击登录按钮触发
const register = async () => {
  await ruleFormRef.value
    .validate()
    .then(() => {
      // console.log('校验通过');
      registerApi({
        Account: ruleForm.value.Account,
        user_name: ruleForm.value.username,
        email: ruleForm.value.email,
        password: ruleForm.value.pwd1,
      }).then((res) => {
        console.log(res);
        let { code, message } = res;
        if (code === 200) {
          router.push("/login");
          ElMessage({
            message: "注册成功",
            type: "success",
          });
        } else {
          ElMessage({
            message: "注册失败" + "," + message,
            type: "error",
          });
        }
      });
    })
    .catch(() => {
      console.log("校验不同通过");
    });
};

const login = () => {
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.Registerback {
  height: 100vh;
  width: 100%;
  position: fixed;
  background-repeat: no-repeat;
  background-image: url("@/assets/img/back.jpg"); //url()括号里面是图片路径，图片即为背景图片
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: center;

  .Registerbackimg {
    height: 100vh;
    width: 100%;
    position: fixed;
    background-repeat: no-repeat;
    background-image: url("@/assets/img/back.jpg"); //url()括号里面是图片路径，图片即为背景图片
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(5px);
    filter: blur(2px);
    transform: scale(1.1);
  }

  .Registerbackimg::after {
    height: 100vh;
    width: 100%;
    position: fixed;
    background-repeat: no-repeat;
    background-image: url("@/assets/img/back.jpg"); //url()括号里面是图片路径，图片即为背景图片
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(5px);
    filter: blur(2px);
    // transform: scale(1.1);
    content: " ";
    display: block;
    width: 100%;
    height: 400rpx;
    // background: rgba(17, 17, 17, .2);
    z-index: 1;
  }

  .Registerlocat {
    margin-top: 7%;
    background-color: rgba(32, 43, 54, 0.5);
    width: 50%;
    height: 500px;
    border-radius: 20px;
    display: flex;
    // flex-direction: column;
    justify-content: center;
    text-align: center;
    background: url("@/assets/img/back.jpg") no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;

    .registerbox {
      width: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    h1 {
      text-align: center;
      color: $colortitle;
      font-family: "楷体";
    }
    .inputbox {
      width: 400px;
    }
    .title {
        text-align: center;
        font-size: 65px;
        letter-spacing: 20px;
        // padding-left: 5px;
        // top: 0px;
        // text-align: center;
        // bottom: 53px;
        left: 10 px;
      // top: 0px;
      // text-align: center;
      bottom: 22px;
      position: relative;
      // font-family: '楷体';
      color: yellow;
      -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.1, transparent), to(rgba(3, 3, 3, 0.2)));
      // font-size:80px; /*设置字体大小*/
      font-weight: 800; /*设置字体粗细*/
      text-shadow: 1px 0px #ff0000, 1px 2px #ff0000, 3px 1px #ff0000,
        2px 3px #ff0000, 4px 2px #ff3700, 4px 4px #ff0000, 5px 3px #ff0000,
        5px 5px #ff0000, 7px 4px #990000;
      // 6px 6px #006615, 8px 5px #009916, 7px 7px #006615,
      // 9px 6px #009916, 9px 8px #006615, 11px 7px #009916;/*设置文字阴影*/
    }
    .title1{
        letter-spacing: 10px;
        margin-bottom: 20px;
    }

    .btnbox {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
  }
}
</style>
